<template>
  <div>
    <section class="m-scenes">
      <dl @mouseover="over">
        <dt>有格调</dt>
        <dd :class="{active:kind === 'all'}" kind="all">全部</dd>
        <dd :class="{active:kind === 'part'}" kind="part">约会</dd>
      </dl>
      <ul class="ibody">
        <li v-for="item in currentScenes" :key="item.title">
          <el-card :body-style="{ padding: '0px' }" shadow="never">
            <img
              :src="item.img"
              alt
            />
            <ul class="cbody">
              <li class="title">{{item.title}}</li>
              <li class="pos">{{item.detail}}</li>
              <li class="price">
                <span class="price-num">{{item.price}}</span>
                <span class="old-price">门市价¥{{item.oldPice}}</span>
                <span class="right-info">{{item.address}}</span>
              </li>
            </ul>
          </el-card>
        </li>
      </ul>
    </section>
  </div>
</template>
<script>
export default {
  data() {
    return {
      kind: "all",
      list: {
        all: [
          {
            img:
              "//p0.meituan.net/bbia/451e0e7425603b0a74846c714e5a123a85413.jpg",
            title: "淼鑫猪肚鸡（维多利广场店）",
            detail: "2-3人餐，提供免费WiFi",
            price: 110,
            oldPice: 218,
            address: "中山六路"
          }
        ],
        part: [
          {
            img:
              "//p1.meituan.net/msmerchant/05ddb5ae154b09bfa16936f36f59a5d41352106.jpg@368w_208h_1e_1c",
            title: "必胜客（中六乐购店）",
            detail: "3份A075 【儿童餐】小不点儿童餐1份",
            price: 99,
            oldPice: 117,
            address: "中山六路"
          }
        ]
      }
    };
  },
  methods: {
    over(e) {
      let dom = e.target
      let tag = dom.tagName.toLowerCase()
      if (tag == 'dd') {
        this.kind = dom.getAttribute('kind')
      }
    }
  },
  computed: {
    currentScenes() {
      return this.list[this.kind]
    }

  }
};
</script>
<style lang="scss">
@import "@/assets/css/index/scenes.scss";
</style>